<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		span {
			color: red;
			font-size: 12px;
		}

		form {
			width: 250px;
		}

		#username,
		#userpwd,
		#userpwds,
		#emali {
			margin: 5px 0;
			outline-style: none;
			border: 1px solid #ccc;
			border-radius: 3px;
			padding: 7px 10px;
			font-size: 18px;
			width: 250px;
		}

		#username:focus,
		#userpwd:focus,
		#userpwds:focus,
		#emali:focus {
			border-color: aqua;
			outline: 0;
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
		}

		#submit,
		#init {
			width: 270px;
			outline-style: none;
			border: none;
			background-color: #ff5500;
			border-radius: 5px;
			padding: 8px 0;
			margin-top: 10px;
			color: #fff;
			font-size: 18px;
		}

		#submit:hover {
			background-color: #ff8725;
		}

		#init {
			background-color: #bebebe;
		}

		#init:hover {
			background-color: #dadada;
		}
	</style>

	<script language="JavaScript">
		window.onload = function () {
			//***********************用户名*************************
			var userblurs = document.getElementById("username");
			userblurs.onblur = function () {
				//去除空白
				var username = userblurs.value;
				username = username.trim();

				var usernamespan = document.getElementById("usernametext");
				if (username) {
					if (username.length < 15 && username.length > 6) {
						var RegExp = /^[A-Za-z0-9]+$/;
						var ok = RegExp.test(username);
						if (ok) {
							usernamespan.innerHTML = "用户名OK";
						}
						else {
							usernamespan.innerHTML = "用户名不能含有特殊符号";
						}
					}
					else {
						usernamespan.innerHTML = "用户名的长度在6-15";
					}
				}
				else {
					usernamespan.innerHTML = "用户名空";
				}


				userblurs.onfocus = function () {
					usernamespan.innerHTML = "";
				}

			}
			//*****************************密码*********************************


			var userpwd_1 = document.getElementById("userpwds");
			var userpwdspan = document.getElementById("userpwdss");
			userpwd_1.onblur = function () {
				var userpwd_0 = document.getElementById("userpwd");
				var userpwd_00 = userpwd_0.value;
				var userpwd_11 = userpwd_1.value;
				if (userpwd_00 == userpwd_11 & userpwd_00 != "") {
					userpwdspan.innerHTML = "密码OK";
				}
				else {
					userpwdspan.innerHTML = "密码不合法";
				}
			}


			//*********************邮箱****************************
			var emaliid = document.getElementById("emali");

			emaliid.onblur = function () {
				var emalis = emaliid.value;
				var emalispan = document.getElementById("nameemalitext")
				var onRegExp = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
				var pwd = onRegExp.test(emalis);
				if (pwd) {
					emalispan.innerHTML = "邮箱OK";
				}
				else {
					emalispan.innerHTML = "邮箱不合法";
				}
			}

			//***********************注册*************************

			var submits = document.getElementById("submit");
			submits.onclick = function () {
				//***判断各项是否合法

				userblurs.onblur();


				userpwd_1.onblur();


				emaliid.onblur();



				if (usernametext.innerText == "用户名OK" && userpwdss.innerText == "密码OK" && nameemalitext.innerText == "邮箱OK") {
					var userForm_1 = document.getElementById("userForms");
					userForm_1.action = "http://127.0.0.1:8080/ye";
					userForm_1.submit();
				}
				else {
					alert("信息不合法，请重新输入");
				}

			}

		}
	</script>
</head>

<body>
	<h1>注册</h1>
	<form id="userForms" action="http://127.0.0.1:8080/id/save" method="get">
		<input placeholder="用户名" type="text" name="username" id="username" /><span id="usernametext"></span><br />
		<input placeholder="密码" type="text" name="suerpwd" id="userpwd" /><span id="userpwdtext"></span><br />
		<input placeholder="确认密码" type="text" id="userpwds" /><span id="userpwdss"></span><br />
		<input type="radio" name="sex" value="男" /><label for="sex">男</label>
		<input type="radio" name="sex" value="女" /><label for="sex">女</label><br />
		<input placeholder="emali" type="text" name="emali" id="emali" /><span id="nameemalitext"></span><br />
		<input type="button" id="submit" value="注册" /><br />
		<input type="submit" value="重置" id="init" />
	</form>
</body>

</html>